<template>
  <div>
    <!-- 编辑 -->
    <el-dialog
      title="文件重命名"
      :visible.sync="editFormVisible"
      :close-on-click-modal="false"
      class="edit-form"
      center
    >
      <el-form :model="editForm" label-width="80px" ref="editForm">
        <el-form-item label="名称" prop="Name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
          <el-input
            v-model="editForm.date"
            auto-complete="off"
            :disabled="true"
          ></el-input>
          <el-input
            v-model="editForm.storage"
            auto-complete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取 消 </el-button>
        <el-button type="primary" @click.native="handleUpdate('editForm')"
          >确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 外链设置 -->
    <el-dialog title="文件分享" :visible.sync="dialogShareFormVisible" center>
      <el-form :model="form" ref="form">
        <el-form-item
          label="链接有效期至："
          :rules="{
            required: true,
          }"
        >
          <el-col :span="11" class="timeCol">
            <el-date-picker
              v-model="shareDate"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="是否设置提取码：">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createShareLink" round plain
          >生成链接</el-button
        >
      </div>
      <div slot="footer">
        <small>tips: 若分享的文件是视频或音频,有效期仅为一小时</small>
      </div>
    </el-dialog>
    <!-- 外链生成 -->
    <el-dialog
      title="分享链接"
      :visible.sync="shareLinkDialog"
      center
      :close-on-click-modal="false"
      @opened="ShowQRCode()"
      ><img
        src="@/assets/css/images/fileShare.svg"
        @click="goShare"
        class="shareButton"
        alt=""
      />
      <el-form :model="form" ref="form">
        <el-form-item label="分享链接：" :label-width="formLabelWidth">
          <el-input v-model="form"> </el-input>
        </el-form-item>
        <el-form-item
          label="提取码："
          :rules="[{ type: 'number', message: '提取码必须为数字值' }]"
        >
          <el-input type="textarea" v-model="code"></el-input>
        </el-form-item>
        <el-form-item label="外链二维码:"> </el-form-item>
      </el-form>
      <div id="qrcode" style="margin-left:42%"></div>
      <!-- tips -->
      <div slot="footer">
        <small>tips: 有效期至截止日期当天23:59:59</small>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="videoDialog" style="">
      <video
        :src="videoSrc"
        controls="controls"
        width="100%"
        height="100%"
        style="border-radius:10px"
      ></video>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
const axios = require("axios");
export default {
  data() {
    return {
      videoSrc: "",
      videoDialog: false,
      //时间选择器配置
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
        shortcuts: [
          {
            text: "当天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "1天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "7天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
          {
            text: "14天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 14);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      radio: "2",
      //文件上传状态
      fileStatusText: {
        success: "上传成功",
        error: "error",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中",
      },
      multipleSelection: [],
      form: {
        name: "",
        code: "",
      },
      //提取码
      code: "",
      editForm: {
        name: "",
        date: "",
        storage: "",
        index: 0,
      },
      //有效期
      shareDate: "",
      editFormVisible: false,
      //生成分享链接
      dialogShareFormVisible: false,
      panelShow: false,
      uploadDlg: false,
      //分享链接
      shareLinkDialog: false,
    };
  },
  mounted() {
    // this.qrcode();
    this.fileimg();
  },
  methods:{
      createShareLink() {
      // console.log(this.shareDate.getTime());
      if (this.shareDate != "") {
        this.dialogShareFormVisible = false;
        setTimeout(() => {
          this.shareLinkDialog = true;
          this.$message.success("链接生成成功,有效期至" + this.shareDate);
        }, 500);
      } else {
        this.$message.error("请设置外链有效期！");
      }
      //随机生成提取码
      if (this.radio == 1) {
        var code = "";
        for (var i = 0; i < 6; i++) {
          var radom = Math.floor(Math.random() * 10);
          code += radom;
        }
        this.code = code;
      } else {
        this.code = "";
      }
    },
    // 加载二维码
    ShowQRCode() {
      document.getElementById("qrcode").innerHTML = "";
      // this.qrcode = this.$QRCode();
      let qrcode = new QRCode("qrcode", {
        width: 132,
        height: 132,
        text: "https://www.baidu.com", // 二维码地址
      });
    },
    goShare() {
      var { href } = this.$router.resolve({
        name: "sharePage",
      });
      localStorage.setItem("code", this.code);
      localStorage.setItem("time", this.shareDate.getTime());
      window.open(href);
    },
    getShareLink: function(index, row) {
      this.dialogShareFormVisible = true; //dialog对话窗口打开
      var url = Object.assign({}, row);
      var fileurl = "http://localhost:8080/static/pdf/web/viewer.html?file=";
      // var fileurl = "http://localhost:8080/sharePage"
      this.form = fileurl + url.name; //将数据传入dialog页面
      // console.log(url)
    },
  }
  
};
</script>

<style lang="less" scoped></style>
